import React, { useState } from 'react';
import { Row, Col, Radio } from 'antd';
import ListReport from './ReportTable';
import { useModel } from 'umi';
type PropField = {
  sdate: Date | string;
  edate: Date | string;
  cyno: string;
  timeLevel: string;
  emplLevel: string;
  emplID: number;
  colName: string;
  groupCalc: string;
  cuid: number;
  vertical: boolean;
};
const IndiClieDataChart: React.FC<PropField> = (props) => {
  const { pieItems } = useModel('options');
  const { sdate, edate, cyno, timeLevel, emplLevel, emplID, colName, cuid, vertical, groupCalc } =
    props;
  let initItemType = null;
  if (pieItems && pieItems![colName]) {
    initItemType = pieItems![colName][0];
  }
  const [itemType, setItemType] = useState(initItemType);
  const paramVals = { date: edate, cyno, timeLevel, emplLevel, emplID: '' + emplID, colName, cuid };
  const paramVals2 = {
    sdate,
    edate,
    cyno,
    emplLevel,
    emplID: '' + emplID,
    colName,
    itemType,
    cuid,
  };
  const items = { TPNO: '业务种类', PERD: '期限', CYNO: '币种', ITID: '科目' };
  const span = vertical ? 24 : 12;
  const lcReptName: string =
    groupCalc === 'sum' ? 'ch_indi_clie_ywfx_column' : 'ch_indi_clie_ywfx_lineColumn';
  const pieReptName: string =
    groupCalc === 'sum' ? 'ch_indi_clie_ywfx_pie_sum' : 'ch_indi_clie_ywfx_pie';
  let unit = 0;
  if (colName.startsWith('NUM_')) {
    unit = 1;
  }
  return (
    <Row style={{ marginTop: -16 }}>
      <Col span={span} key="lineColumn">
        <ListReport
          reportName={lcReptName}
          hideParamBar={true}
          paramVals={paramVals}
          height={400}
          unit={unit}
          refresh={true}
        />
      </Col>
      {itemType ? (
        <Col span={span} key="pie" style={{ paddingLeft: 10 }}>
          <div style={{ right: 10, marginTop: -15, position: 'absolute', zIndex: 1000 }}>
            <Radio.Group
              value={itemType}
              size="small"
              style={{ marginTop: 16 }}
              onChange={(e) => setItemType(e.target.value)}
            >
              {pieItems![colName].map((name: string, i: number) => (
                <Radio.Button key={i as React.Key} value={name}>
                  {items[name]}
                </Radio.Button>
              ))}
            </Radio.Group>
          </div>
          <ListReport
            reportName={pieReptName}
            hideParamBar={true}
            paramVals={paramVals2}
            height={345}
            unit={unit}
            refresh={true}
          />
        </Col>
      ) : null}
    </Row>
  );
};
export default IndiClieDataChart;
